<template>
  <div style="padding: 10px">
    <div style="margin: 10px 0">


      <el-table  :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="num" label="柜号" sortable > </el-table-column>
        <el-table-column prop="size" label="尺寸" > </el-table-column>
        <el-table-column prop="states" label="状态"> </el-table-column>
        <el-table-column >
          <template #default="scope">
            <el-button type="primary" @click="add(scope.row.num)">存件</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>

    <div style="margin: 10px 0" >
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>

      <el-dialog
          title="存件信息"
          v-model="dialogVisible"
          width="30%">
        <el-form model="form" label-width="120px">
          <el-form-item label="收件人手机号">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="store">存 件</el-button>
        </span>
        </template>
      </el-dialog>

    </div>

  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: "storeByExpressman",
  components:{

  },
  data(){
    return {
      user: {},
      form:{},
      dialogVisible: false,
      dialogVisible1: false,
      search: '',
      currentPage: 1,
      pageSize:10,
      total: 0,
      tableData: [],
      postage: 0
    }
  },
  created(){
    let userStr = sessionStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
    this.load()
  },
  methods: {
    load() {
      request.get("/cabinet/queryEmptyCabinet", {
        params: {
          pageNum:this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }

      }).then(res => {
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },

    add(num){
      this.dialogVisible=true
      this.form={}//清空表单域
      this.form.num=num
    },
    store(){
      request.get("/getexpress/add/"+this.form.tel+"/"+this.form.num+"/"+this.user.tel).then(res => {
        //then是一个链式操作
        console.log(res)
        if(res.code === '0'){
          this.$message({
            type: "success",
            message:"存件成功"
          })
          this.dialogVisible=false
        }else{
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    },

    handleSizeChange(pageSize) {   //改变当前每页的个数
      this.pageSize=pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {   //改变当前页数
      this.currentPage=pageNum
      this.load()
    }


  }


}
</script>

<style scoped>

</style>